<template>
    <div class="divEchartsGauge" ref="gaugeID"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        pm25: Number
    },
    mounted() {
        this.getEcharts();
    },
    updated() {
        this.getEcharts();
    },
    methods: {
        getEcharts() {
            const myChart = echarts.init(this.$refs.gaugeID);
            myChart.setOption({
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        center: ['50%', '75%'],
                        radius: '90%',
                        min: 0,
                        max: 1,
                        splitNumber: 8,
                        axisLine: {
                            lineStyle: {
                                width: 6,
                                color: [
                                    [0.25, '#7CFFB2'],
                                    [0.5, '#58D9F9'],
                                    [0.75, '#FDDD60'],
                                    [1, '#FF6E76']
                                ]
                            }
                        },
                        pointer: {
                            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                            length: '12%',
                            width: 20,
                            offsetCenter: [0, '-60%'],
                            itemStyle: {
                                color: 'auto'
                            }
                        },
                        axisTick: {
                            length: 12,
                            lineStyle: {
                                color: 'auto',
                                width: 2
                            }
                        },
                        splitLine: {
                            length: 20,
                            lineStyle: {
                                color: 'auto',
                                width: 5
                            }
                        },
                        axisLabel: {
                            color: '#464646',
                            fontSize: 20,
                            distance: -60,
                            rotate: 'tangential',
                            formatter: function (value) {
                                if (value === 0.875) {
                                    return '严重';
                                } else if (value === 0.625) {
                                    return '一般';
                                } else if (value === 0.375) {
                                    return '良好';
                                } else if (value === 0.125) {
                                    return '优';
                                }
                                return '';
                            }
                        },
                        title: {
                            offsetCenter: [0, '-10%'],
                            fontSize: 20
                        },
                        detail: {
                            fontSize: 30,
                            offsetCenter: [0, '-35%'],
                            valueAnimation: true,
                            formatter: function (value) {
                                return Math.round(value * 100) + '';
                            },
                            color: 'inherit'
                        },
                        data: [
                            {
                                value: this.pm25 / 100,
                                name: 'MP2.5'
                            }
                        ]
                    }
                ]
            });
        }
    }

}
</script>

<style>
.divEchartsGauge {
    margin-left: 8px;
    margin-top: 6px;
    width: 97%;
    height: 97%;
    border: 0px blue solid;
    border-radius: 10px;
    box-shadow: 0px -5px 4px 0px #2279ee,
        -6px 0px 4px 0px #2279ee,
        6px 0px 4px 0px #2279ee,
        0px 5px 4px 0px #2279ee;
}
</style>